<template>
	<view class="goods-price">
		<text class="prefix" v-if="prefix" :style="themeColor">
			<slot name="prefix">{{ prefix }}</slot>
		</text>
		<text class="integer" :style="valueStyle">{{ calcValue[0] }}</text>
		<text class="decimal" :style="themeColor">.{{ calcValue[1] }}</text>
		<text class="suffix">
			<slot name="suffix"></slot>
		</text>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	defineOptions({ name: 'goods-price' });

	const props = defineProps({
		value: [String, Number],
		prefix: {
			type: String,
			default: '￥'
		},
		color: {
			type: String,
			default: '#f56c6c'
		},
		size: {
			type: Number,
			default: 36
		}
	});

	const calcValue = computed(() => {
		let value = (+props.value).toFixed(2);
		return value.split('.');
	});

	const themeColor = computed(() => {
		return {
			color: props.color
		};
	});

	const valueStyle = computed(() => {
		let obj = Object.assign({}, themeColor.value, { fontSize: props.size + 'rpx' });
		return obj;
	});
</script>

<style lang="scss">
	.goods-price {
		display: inline-block;
		font-weight: bold;
		.prefix,
		.decimal {
			font-size: 80%;
		}
		.integer {
			margin-left: -$margin-4;
		}
		.suffix {
			margin-left: $margin-8;
			font-weight: normal;
		}
	}
</style>
